<template>
  <div class="home text-center">
    <header v-pin:[direction]="pinPadding" style="width: 100%; text-align: center" class="max640">
      <p>
        Stick me
        <span class="text-color">{{ pinPadding }}</span>
        px from the {{ direction }} of the page
      </p>
    </header>

    <p class="mg20 text-color">{{ time }}</p>

    <!-- <img alt="Vue logo" src="../assets/logo.png" /> -->
    <!-- <HelloWorld :msg="msg" /> -->
    <HelloWorldComposition :user="user" ref="HComps" class="mg20" />
    <p class="mg10 text-color">以下是自定义全局组件</p>
    <div class="mg-b20">
      <YuiButton @click="handleClick()">自定义全局按钮</YuiButton>
    </div>
    <div class="mg-b20">
      <YuiSelect></YuiSelect>
    </div>
    <div class="mg-b20 flex flex-center">
      自定义指令：
      <input type="range" min="0" max="500" v-model="pinPadding" style="z-index: 9" />
    </div>
    <Button type="success" @click="showToast">更改字体颜色</Button>
    <Button type="danger" @click="msgChangeHandler">更改MSG</Button>
    <Button type="primary" @click="userChangeHandler">更改USER</Button>
  </div>
</template>

<script lang="ts">
import dayjs from "dayjs";
import { defineComponent } from "vue";
// import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
import HelloWorldComposition from "@/components/HelloWorldComposition.vue"; // @ is an alias to /src
import { Button, Dialog, Toast } from "vant";

export default defineComponent({
  name: "Home",
  components: {
    HelloWorldComposition,
    // HelloWorld,
    Button,
  },
  data() {
    return {
      direction: "top",
      pinPadding: 0,
      time: "",
      timer: 0,
      color: "red",
      city: ["", "", ""],
      msg: 'Welcome to Your Vue.js + TypeScript App',
      user: 23
    };
  },
  methods: {
    showToast() {
      Toast("字体颜色已改蓝色");
      this.color = "blue";
    },
    handleClick() {
      Dialog({
        title: "标题",
        message: "这是一个全局按钮组件",
      });
    },
    msgChangeHandler () {
      this.msg = 'Welcome to Vue3 & TS'
    },
    userChangeHandler () {
      this.user = 24
    },
    initTime() {
      this.time = dayjs().format("YYYY-MM-DD HH:mm:ss");
      this.timer = setInterval(() => {
        this.time = dayjs().format("YYYY-MM-DD HH:mm:ss");
      }, 1000);
    },
  },
  created() {
    this.initTime();
  },
  mounted () {
    // composition-api 子组件setup内expose对象
    this.$nextTick(async () => {
      const HC: any = this.$refs.HComps
      console.log('===HC===: ', HC.increment())
    })
  },
  beforeUnmount() {
    clearInterval(this.timer);
  },
});
</script>

<style>
.text-color {
  color: v-bind(color);
}
</style>
